<template>
  <div class="ranking-list-container">
    <el-scrollbar>
      <table class="ranking-table">
        <thead>
        <tr>
          <th>年份</th>
          <th>归集总额（万元）</th>
          <th>国税认定额(万元)</th>
          <th>所得税抵扣额(万元)</th>
        </tr>
        </thead>
        <tbody>
        <tr v-for="(item, index) in rankingList" :key="index">
          <td>{{ item.age }}</td>
          <td>{{ item.gjze }}</td>
          <td>{{ item.gsrde }}</td>
          <td>{{ item.sdsdke }}</td>
        </tr>
        </tbody>
      </table>
    </el-scrollbar>
  </div>
</template>


<script>
export default {
  name: "RankingList",
  data() {
    return {
      rankingList: [
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        // ...其他项目...
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },
        { age: "2025", gjze: 859585.58, gsrde:585566.12, sdsdke:58565.85 },

      ],
    };
  },
};
</script>

<style scoped>
.ranking-list-container {
  height: 350px;
  overflow-y: auto;
}

.ranking-table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed; /* 使用固定布局 */
}

.ranking-table th,
.ranking-table td {
  padding: 8px;
  text-align: center; /* 将文本居中对齐 */
  border-bottom: 1px solid #ebebeb;
  overflow: hidden; /* 防止内容溢出 */
  white-space: nowrap; /* 禁止自动换行 */
}

/* 设置列宽 */
.ranking-table th:first-child,
.ranking-table td:first-child {
  width: 25%; /* 假设年份占总宽度的25% */
}
.ranking-table th:not(:first-child),
.ranking-table td:not(:first-child) {
  width: 25%; /* 其他列也各自占25%，可以根据实际情况调整 */
}

/* 自定义滚动条样式 */
::-webkit-scrollbar {
  width: 3px; /* 滚动条宽度 */
  background-color: transparent;
}

::-webkit-scrollbar-track {
  border-radius: 4px;
  background-color: #dddddd; /* 轨道颜色 */
}

::-webkit-scrollbar-thumb {
  border-radius: 4px;
  background-color: #5bc0de; /* 滑块颜色 */
  transition: background-color 0.3s ease-in-out;
}

/* 响应式设计 */
@media screen and (min-width: 2801px) and (max-width: 2900px) {
  .ranking-list-container {
    height: 590px;
  }
}
@media screen and (min-width: 2701px) and (max-width: 2800px) {
  .ranking-list-container {
    height: 575px;
  }
}
</style>
